<template>
    <div>
        <el-tabs type="border-card" class="import-tabs">
            <el-tab-pane label="数据预览">
                <table class="table light-table table-hover table-bordered ">
                    <thead class="thead-light">
                        <tr>
                            <th>序号</th>
                            <th v-for="(v, i) in dbFields" :key="i">{{ v.dbColumnName }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(obj, index) in list" :key="index">
                            <td>{{ index + 1 }}</td>
                            <td v-for="(v, i) in dbFields" :key="i">{{ obj[bounds[v.dbColumnName]] }} </td>
                        </tr>
                    </tbody>
                </table>
            </el-tab-pane>
            <el-tab-pane label="错误数据">
                <table class="table light-table table-hover table-bordered " v-if="badList.length">
                    <thead class="thead-light">
                        <tr>
                            <th>序号</th>
                            <th>错误信息</th>
                            <th v-for="(v, i) in dbFields" :key="i">{{ v.dbColumnName }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(obj, index) in badList" :key="index">
                            <td>{{ index + 1 }}</td>
                            <td>{{ obj.checkerror }}</td>
                            <th v-for="(v, i) in dbFields" :key="i">{{ obj[bounds[v.dbColumnName]] }}</th>

                        </tr>
                    </tbody>
                </table>
                <div v-else>暂无错误数据</div>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
export default {
    props: {
        list: Array,
        dbFields: Array,
        checkedDbFields: Array,
        badList: Array
    },
    data() {
        return {
            showHandle: true,
            title: "导入预览",
            bounds: {},
        }
    },
    methods: {
        refresh(bounds) {
            this.bounds = bounds
            this.$forceUpdate()
        }
    },
    mounted() {
    }
}
</script>

<style lang="scss" scoped></style>